<template>
    <div class="t-dis">
        <div style="padding: 15px 23px 0 23px;">
            <VolHeader icon="el-icon-warning-outline" text="效率汇总" style="margin-bottom: 20px">
                <template #content>
                    <div style="color: #909090; font-size: 13px">
                        <!-- 这家伙很懒,什么也没留下 -->
                    </div>
                </template>
                <!-- <div>
                    <el-button size="mini" type="primary">
                        <i class="el-icon-edit"></i>设置</el-button>
                </div> -->
            </VolHeader>

            <VolForm ref="myform2" :label-width="90" :formFields="formFields" :formRules="formRules"></VolForm>
        </div>
        <div style="height: 10px; background: #eee"></div>
        <div class="container">
            <div class="main">
                <div class="h-chart" id="efficiency-chart">

                </div>
                <div class="h-table">
                    <el-table :data="tableData" style="width: 100%" height="250">
                        <el-table-column fixed prop="date" label="Date" width="150" />
                        <el-table-column prop="name" label="Name" width="120" />
                        <el-table-column prop="state" label="State" width="120" />
                        <el-table-column prop="city" label="City" width="320" />
                        <el-table-column prop="address" label="Address" width="600" />
                        <el-table-column prop="zip" label="Zip" width="120" />
                    </el-table>
                </div>
            </div>
            <div class="foot"></div>
        </div>
    </div>
</template>
<script>
import VolForm from "@/components/basic/MesForm.vue";
import VolHeader from "@/components/basic/MesHeader.vue";
import { chart_efficiency } from "../../home/efficiency-chart-options";
import { ref, onMounted, onUnmounted } from "vue";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import "echarts/lib/component/legend";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/grid";
let echarts = require("echarts/lib/echarts");
var $chart_efficiency;
export default {
    components: { VolForm, VolHeader },
    methods: {
        getForm() {
            this.$message.error(JSON.stringify(this.formFields));
        },
        reset() { },
    },
    mounted() { },
    data() {
        return {
            loadKey: true,
            formFields: {
                Variety: "日用品",
                DateRange: "2019-09-01",
                City: "北京市",
                AvgPrice: 1238000,
                Variety1: "",
                DateRange1: "2019-09-02",
                City1: "上海市",
                AvgPrice1: 7.72,
                DateRange2: "2019-09-03",
                City2: "广州市",
            },
            formRules: [
                [
                    {
                        title: "商品类型",
                        dataKey: "age",
                        // 如果这里绑定了data数据，后台不会加载此数据源
                        data: [],
                        field: "Variety",
                        type: "select",
                    },
                    {
                        dataKey: "city",
                        title: "所在城市",
                        field: "City",
                        type: "select",
                        data: [],
                    },
                    {
                        title: "成交均价",
                        field: "AvgPrice",
                    },
                    {
                        title: "详细地址",
                        field: "City2",
                    },
                ],
                [
                    {
                        dataKey: "city",
                        title: "所在地区",
                        field: "City1",
                        type: "select",
                        data: [],
                    },
                    {
                        title: "生产价格",
                        field: "AvgPrice1",
                    },
                    {
                        type: "date",
                        title: "生产日期",
                        field: "DateRange2",
                    },
                    {
                        title: "审核日期",
                        field: "DateRange",
                        type: "date",
                    },
                ],
            ],
        };
    },
    created() {
        this.http.get('api/Base_Process/getAppHomeProcessTop5', {}, true).then((result) => {
            let categories = result.map(item => (item.name));
            let data = result.map(item => (item.data));
            chart_efficiency.xAxis[0].data = categories;
            chart_efficiency.series[0].data = data;
            $chart_efficiency = echarts.init(document.getElementById("efficiency-chart"));
            $chart_efficiency.setOption(chart_efficiency);
        });
    },
    setup() {
        let open = (item) => {
            window.open(item.url, "_blank");
        };
        let interval;
        onMounted(() => {
        });
        onUnmounted(() => {
            interval && clearInterval(interval);
            if ($chart) {
                $chart_efficiency.dispose();
            }
        });
        return { open };
    },
    destroyed() {
        $chart_efficiency = null;
    },
};
</script>
<style lang="less" scoped>
.t-dis {
    margin-bottom: 15px;
    background: white;
}

.t-dis ::v-deep(.example-tb .el-alert) {
    display: none;
}

.t-dis ::v-deep(.example-tb .tb) {
    margin-top: 0 !important;
}

.t-dis ::v-deep(.example-tb .search-info) {
    margin-left: -19px;
}

.main{
    margin-bottom: 15px;
    background: #fbfbfb
}
.main .h-chart{
    height: 400px;
    padding: 10px;
}
.main .h-table{
    padding: 0px 10px;
}
</style>
